<template>
	<view class="main">
		<view id="head">
			<!-- <view class="back" @click="$back">返回</view> -->
			<view class="back" @click="backHome">返回</view>
			<text>{{title}}</text>
		</view>

		<!-- <ryfStep ref="step" v-bind:step.sync="Index" v-bind:title.sync="title" :stepData="stepData"
			@step_change="step_change" /> -->

		<ryfStep ref="step" v-bind:step.sync="step_id" v-bind:title.sync="title" :stepData="stepData"
			@step_change="step_change" :compeleteList="compeleteList"/>

		<!-- 		<template v-if="list.length">
			<one v-if="Index == 0" :Index.sync="Index" :id="fifter('0')" />
			<two v-else-if="Index == 1" :Index.sync="Index" :id="fifter('1')" />
			<three v-else-if="Index == 2" :Index.sync="Index" :id="fifter('2')" />
			<four v-else-if="Index == 3" :Index.sync="Index" :id="fifter('3')" />
			<five v-else-if="Index == 4" :Index.sync="Index" :id="fifter('4')" />

		</template> -->
		<template v-if="list.length > 0">
			<MonthlyCom v-if="step_title == '单点评吸'" :Index.sync="Index" :id="fifter('0')" 
			:already="compeleteList['0']" @c_submit="c_submit"></MonthlyCom>
			<!-- <one v-if="step_title == '单点评吸'" :Index.sync="Index" :id="fifter('0')" @c_submit="c_submit" /> -->
			
			<ContrastCom v-else-if="step_title == '对比评吸'" :Index.sync="Index" :id="fifter('1')"
			:already="compeleteList['1']" @c_submit="c_submit"></ContrastCom>
			<!-- <two v-else-if="step_title == '对比评吸'" :Index.sync="Index" :id="fifter('1')" @c_submit="c_submit" /> -->
			
			<three v-else-if="step_title == '三点评吸'" :Index.sync="Index" :id="fifter('2')" @c_submit="c_submit" />
			<!-- <four v-else-if="step_title == '竞品评价'" :Index.sync="Index" :id="fifter('3')" @c_submit="c_submit" /> -->
			
			<singleCom v-else-if="step_title == '单料评吸'" :Index.sync="Index" :id="fifter('4')" 
			:already="compeleteList['4']" @c_submit="c_submit"></singleCom>
			<!-- <five v-else-if="step_title == '单料评吸'" :Index.sync="Index" :id="fifter('4')" 
			:already="compeleteList['4']"
			@c_submit="c_submit" /> -->
			
			<contrastRank v-else-if="step_title == '对比排序'" :Index.sync="Index" :id="fifter('5')" :already="compeleteList['5']"
			@c_submit="c_submit"></contrastRank>
			<template v-else>
				<!-- <view style="text-align: center;">暂无开始的评测</view> -->
				<u-empty mode="data" text="暂无开始的评测"> </u-empty>
			</template>
		</template>

		<zero-loading v-if="isLoading" :mask="true"></zero-loading>
	</view>
</template>

<script>
	import ryfStep from "@/components/ryf-step/step.vue"
	import one from "@/pages/tPoint/components/one.vue"
	import two from "@/pages/tPoint/components/two.vue"
	import three from "@/pages/tPoint/components/three.vue"
	import four from "@/pages/tPoint/components/four.vue"
	import five from "@/pages/tPoint/components/five.vue"
	import contrastRank from "./components/contrastRank.vue"
	import MonthlyCom from "./components/monthlyCom.vue"
	import ContrastCom from './components/contrastCom.vue'
	import singleCom from "./components/singleCom.vue"
	import {
		smokeMeetingUser,
		getSmokes,
		getOngoing, getCompeleteList
	} from "@/api/signIn.js"
	
	// 分类名称
	const comType = {
		0:'单点评吸',
		1:'对比评吸',
		2:'三点评吸',
		3:'竞品评价',
		4:'单料评吸',
		5:'对比排序',
	}

	export default {
		components: {
			ryfStep,
			one,
			two,
			three,
			four,
			five, contrastRank, MonthlyCom, ContrastCom,
			singleCom
		},
		data() {
			return {
				title: '',
				Index: 0,
				IndexID: 0,
				list: [],
				stepData: [],
				step_title: "",
				step_id: 0,
				timer: null,
				isFirstPage: true,
				compeleteList: {
					0: false, 1:false, 2:false, 3:false, 4:false, 5:false
				}, //完成状态
			}
		},
		methods: {
			fifter(type) {
				let id = 0
				this.list.forEach(item => {
					if (item.classify == type) {
						id = item.id
					}

				})

				return id
			},
			step_change(cid, cname) {
				// console.log(cid, cname);
				this.step_title = cname
				this.step_id = cid
				
				// this.getData()

			},
			/** 返回到首页*/
			backHome() {
				uni.redirectTo({
					url:"/pages/index/index"
				})
			},
			/** 获取顶部的完成状态*/
			async getCompeleteList(redire=false) {
				const res = await getCompeleteList()
				console.log("获取到的完成状态", res)
				let temp = -1 //需要重定向的未知
				let loop = true //可变
				if(res.code!= 200) return;
				if(res.data&&res.data.length < 1) return
				res.data.forEach(ele=>{
					let keys = Object.keys(ele)
					if(keys.length > 0) {
						let key = keys[0]
						let already = ele[key]==1 //是否已将填写
						this.$set(this.compeleteList, key, already)
						// this.compeleteList[key] = ele[key]==1
						if(!this.compeleteList[key]&&loop) {
							temp = key
							loop = false
						}
					}
				})
				if(redire&&temp!==-1) {
					let a = this.stepData.find(ele=>{
						return ele.classify == temp
					})
					if(a) {
						this.$nextTick(()=>{
							this.step_title = a.name
							this.step_id = a.id
						})
						
					}
				}
			},
			// 子组件提交事件
			c_submit(e) {
				// this.getData()
				console.log("父组件e",e)
				Object.keys(comType).forEach(key=>{
					if(comType[key] == e) {
						console.log("this.compeleteList", this.compeleteList, key)
						// this.compeleteList[key] = true
						this.$set(this.compeleteList, key, true)
					}
				})
				const res = this.getPreviousItemById(this.stepData, e)

				if (res) {
					this.step_change(res.id, res.name)
				}


				// 最后一个会返回第一个数据
				// function getNextItem() {  
				//     currentIndex = (currentIndex + 1) % array.length;  
				//     return array[currentIndex];  
				// }

				// let _this = this
				// console.log(e);
				// this.stepData.forEach((item,index) => {
				// 	if (item.name === e) {
				// 		_this.step_change(item.id, e)

				// 	}
				// })
			},
			getPreviousItemById(arr, targetId) {
				console.log(arr, targetId);

				let currentIndex = -1; // 初始化索引为-1，表示未找到目标元素

				// 遍历数组查找目标元素的索引
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].name == targetId) {
						currentIndex = i;
						break;
					}
				}

				// 如果没有找到目标元素，返回null
				if (currentIndex === -1) {
					return null;
				}

				// 计算上一条数据的索引 
				const previousIndex = currentIndex + 1;

				// 如果上一条数据的索引有效，返回上一条数据，否则返回null
				return previousIndex >= 0 ? arr[previousIndex] : null;
			},
			getData() {
				// this.stepData = []
				getOngoing({
					loading: false,
				}).then(res => {
					this.getCompeleteList(true)
					if (res.code == 200) {
						console.log("************", res)
						this.list = res.data.meetingAllRepList || [];

						this.list.forEach(item => {
							// if (item.status == '1') {
								this.stepData.push({
									name: comType[item.classify]||"",
									isActive: false,
									id: item.id,
									classify: item.classify
								})
							// }
						})
						if(this.stepData.length > 0 ) {
							this.step_id = this.stepData[0].id
							// 页面初始化数据
							this.title = this.stepData[0].name
							this.step_title = this.stepData[0].name
							this.step_change(this.stepData[0].id, this.stepData[0].name)
						}

					}
				})
			},
			// 原本的定时器获取重复事件(不理解)
			oldresetGetList() {
				let _this = this
				
				this.timer = setInterval(() => {
					getOngoing({
						loading: false,
					}).then(res => {
						// this.getCompeleteList()
						if (res.code == 200) {
				
							let newData = []
							let nowSetpData = []
							res.data.meetingAllRepList.forEach(item => {
								// if (item.status == '1') {
									if (_this.stepData.length > 0) {
										
										nowSetpData.push({
											name: comType[item.classify]||"",
											isActive: false,
											id: item.id,
											classify: item.classify
										})
									} else {
										_this.stepData.push({
											name: comType[item.classify]||"",
											isActive: false,
											id: item.id,
											classify: item.classify
										})
									}
				
								// }
							})
				
				
				
							// 定义一个函数来检查一个对象的id是否存在于另一个数组中  
							function isIdUnique(obj, array) {
								return !array.some(item => item.id === obj.id);
							}
				
							// 获取array1中id不相同的对象  
							const uniqueFromArray1 = nowSetpData.filter(obj => isIdUnique(obj, _this
								.stepData));
				
							// 获取array2中id不相同的对象  
							const uniqueFromArray2 = _this.stepData.filter(obj => isIdUnique(obj,
								nowSetpData));
				
							// 合并两个结果数组，如果两个数组中的对象id都不相同，则它们都会被包括在内  
							const uniqueObjects = [...uniqueFromArray1, ...uniqueFromArray2];
				
							// console.log(uniqueObjects); // 输出: [{ id: 3, name: 'Charlie' }]
				
				
							if (_this.stepData.length > 0) {
								_this.stepData.push(...uniqueObjects)
							}
				
							_this.stepData = _this.stepData.filter((item, index) => {
								return _this.stepData.findIndex(otherItem => otherItem.id === item
										.id) ===
									index;
							});
				
				
				
						}
					})
				
				
				
				}, 1000 * 3)
			},
			
			
			newResetGetList() {
				this.timer = setInterval(async ()=>{
					const res = await getOngoing({loading: false})
					if(res.code != 200) return
					
					this.list = res.data.meetingAllRepList || [];
					
					let list = [];
					(res.data.meetingAllRepList||[]).forEach(item=>{
						list.push({
							name: comType[item.classify]||"",
							isActive: false,
							id: item.id,
							classify: item.classify
						})
					})
					let a = list.find(ele=>{ return ele.id == this.step_id })
					this.stepData = list
					if(!a && list.length > 0) {
						this.step_id = this.stepData[0].id
						// 页面初始化数据
						this.title = this.stepData[0].name
						this.step_change(this.stepData[0].id, this.stepData[0].name)
					}
					
				}, 3 * 1000)
			}
		},
		watch: {
			Index(newVal, oldVal) {
				// console.log('oldVal:', oldVal) // coderkey
				// console.log('newVal:', newVal) // pink
				// this.step_title  = newVal == 0 ? '单点评吸' : newVal == 1 ? '对比评吸' :
				// 	newVal == 2 ? '三点评吸' : newVal == 3 ? '竞品评价' :
				// 	newVal == 4 ? '单料评吸' : ''
				this.step_title = this.stepData[newVal].name
			},
			stepData(newVal, oldVal) {
				if (oldVal.length == 0) {
					this.isFirstPage = false
				}
				if (!this.isFirstPage && newVal.length > 0) {
					this.step_change(newVal[0].id, newVal[0].name)
					this.isFirstPage = true
				}
			} 
		},
		mounted() {
			this.getData()
			this.newResetGetList()

		},

		beforeDestroy() {
			clearInterval(this.timer)
		}
		// destroyed() {
		// 	clearInterval(this.timer)
		// }
	}
</script>

<style lang="scss">
	.smain {
		padding-bottom: 86rpx;
	}
	.main {
		height: calc(100vh - var(--status-bar-height));
		display: flex;
		flex-direction: column;
	}
</style>